<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <!-- //for-mobile-apps -->
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/stylesheets/homepage.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/css/animate.css" rel="stylesheet" type="text/css" media="all">
    <!-- js -->
    <!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>-->
    <script src="/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="/js/bootstrap-3.1.1.min.js"></script>
    <script type="application/x-javascript">
        addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
        function hideURLbar(){
            window.scrollTo(0,1);
        }
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <!--animate-->
    <script src="/js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
    <!--//end-animate-->
</head>
<body>
<div style="background-color: #212121">
    <div class="header wow fadeInDown animated" data-wow-delay=".5s">
        <div class="container">
            <div class="header-left grid">
                <div class="grid__item color-1 wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s">
                    <h1><a href="/"><i></i><span class="link link--kukuri" data-letters="爱宠驿站">爱宠驿站</span></a></h1>
                </div>
            </div>
            <div class="header-right">
                <%
                if(username==undefined){
                %>
                <a href="/login">
                    <img src="/images/person.png" alt="">
                    登录
                </a>

                <%
                }else{
                %>

                <a href="/users">
                    <img src="/images/person.png" alt="">
                    <%=username%>
                </a>
                <%
                }
                %>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="banner">
    <div class="ban-top ">
        <div class="container">
            <div class="ban-top-con">
                <div class="top_nav_left">
                    <nav class="navbar navbar-default">
                        <div class="container-fluid">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>
                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse menu--shylock" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav menu__list">
                                    <li class="active menu__item menu__item--current"><a class="menu__link" href="/">首页 <span class="sr-only">(current)</span></a></li>
                                    <li class=" menu__item"><a class="menu__link" href="/about">关于我们</a></li>
                                    <li class=" menu__item"><a class="menu__link" href="/users/apply_foster">申请成为寄养家庭</a></li>
                                    <li class=" menu__item"><a class="menu__link" href="/users/foster">宠物寄养</a></li>
                                    <li class=" menu__item"><a class="menu__link" href="/article">社区</a></li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                </div>
                <div class="top_nav_right">

                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="ban-bot text-center">
        <script src="/js/responsiveslides.min.js"></script>
        <script>
            // You can also use "$(window).load(function() {"
            $(function () {
                // Slideshow 4
                $("#slider3").responsiveSlides({
                    auto: true,
                    pager: true,
                    nav: false,
                    speed: 500,
                    namespace: "callbacks",
                    before: function () {
                        $('.events').append("<li>before event fired.</li>");
                    },
                    after: function () {
                        $('.events').append("<li>after event fired.</li>");
                    }
                });
            });
        </script>
        <div  id="top" class="callbacks_container">
            <ul class="rslides" id="slider3">
                <li>
                    <div class="ban-info">
                        <h3>狗是唯一比你自己更爱你的动物！</h3>
                        <p>宠物是我们最忠实的朋友，我们会像你一样爱他！！！</p>
                        <a class="hvr-rectangle-out" href="/about">about us</a>
                    </div>
                </li>
                <li>
                    <div class="ban-info">
                        <h3>我们真的很关心你的宠物的福利！</h3>
                        <p>宠物是我们最忠实的朋友，我们会像你一样爱他！！！</p>
                        <a class="hvr-rectangle-out" href="/about">about us</a>
                    </div>
                </li>
                <li>
                    <div class="ban-info">
                        <h3>我们喜欢和你的狗一起散步和玩耍！</h3>
                        <p>宠物是我们最忠实的朋友，我们会像你一样爱他！！！</p>
                        <a class="hvr-rectangle-out" href="/about">about us</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<!-- content -->
<div class="content">
    <div class="container">
        <h3 class="title wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s" >欢迎来到 <span>爱宠驿站</span></h3>
        <p class="con-para wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s">
            为您和您的宠物带来全新的生活方式
            温馨舒适的环境，开放宽敞的活动空间，温暖充足的阳光
            清新流动的空气，干净清洁的饮用水，新鲜可口的食物
            有爱抚、有固定的散步时间、还有一起玩耍的小伙伴
        </p>
        <div class="content-grids ">
            <div class="col-md-3 wel-grid text-center wow flipInY" data-wow-duration="1.5s" data-wow-delay="0.1s">
                <a href="/register">
                <div class="btm-clr4">
                    <span></span>
                    <figure class="icon">
                        <img src="/images/icon1.png" alt=" " />
                    </figure>
                    <h4>注册</h4>
                </div>
                </a>
            </div>
            <div class="col-md-3 wel-grid btm-gre text-center wow flipInY" data-wow-duration="1.5s" data-wow-delay="0.1s">
                <a href="/users/apply_foster">
                <div class="btm-clr4 btm-clr1">
                    <span></span>
                    <figure class="icon">
                        <img src="/images/icon4.png" alt=" " />
                    </figure>
                    <h4>申请寄养家庭</h4>
                </div>
                </a>
            </div>
            <div class="col-md-3 wel-grid text-center wow flipInY" data-wow-duration="1.5s" data-wow-delay="0.1s">
                <a href="/users/foster">
                <div class="btm-clr4 btm-clr1">
                    <span></span>
                    <figure class="icon">
                        <img src="/images/icon3.png" alt=" " />
                    </figure>
                    <h4>宠物寄养</h4>
                </div>
                </a>
            </div>
            <div class="col-md-3 wel-grid btm-gre text-center wow flipInY" data-wow-duration="1.5s" data-wow-delay="0.1s">
                <a href="/article">
                    <div class="btm-clr btm-clr3">
                    <span></span>
                    <figure class="icon">
                        <img src="/images/icon2.png" alt=" " />
                    </figure>
                    <h4>社区</h4>
                </div>
                </a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- //content -->
<!-- content-bottom -->
<div class="content-bott">
    <div class="container">
        <h3 class="title wow flipInX" >我们的 <span> 服务</span></h3>
        <div class="col-md-4 services-grid wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s">
            <div class="services-left">
                <img class="img-responsive" src="/images/pic4.jpg" alt=" "/>
            </div>
            <div class="services-right">
                <h4>严格监管</h4>
                <p>平台寄养家庭均经过严格的实名认证</p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-4 services-grid wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s">
            <div class="services-left">
                <img class="img-responsive" src="/images/pic5.png" alt=" "/>
            </div>
            <div class="services-right">
                <h4>在线咨询</h4>
                <p>7×12小时，客服随时为您服务</p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-4 services-grid wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s">
            <div class="services-left">
                <img class="img-responsive" src="/images/pic6.jpg" alt=" "/>
            </div>
            <div class="services-right">
                <h4>服务保障</h4>
                <p>提供无忧寄养保障服务</p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-4 services-grid wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s">
            <div class="services-left">
                <img class="img-responsive" src="/images/pic7.jpg" alt=" "/>
            </div>
            <div class="services-right">
                <h4>紧急服务</h4>
                <p>合作医院，独享折扣和紧急服务</p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- //content-bottom -->
<!-- our pets -->
<div class="our_pets">
    <div class="container">
        <h3 class="title wow fadeInUp animated" data-wow-delay=".5s" >寄养<span> 家庭</span></h3>
        <div class="flex-slider wow fadeInDown animated" data-wow-delay=".5s">
            <ul id="flexiselDemo1">
                <li>
                    <div class="laptop">
                        <div class="pets-effect ver_line zoom">
                            <div class="img-box"><img class="img-responsive zoom-img" src="/images/pic10.jpg" alt=" " /></div>
                            <div class="pets-info">
                                <div class="pets-info-slid">
                                    <h4>猫娃狗娃托儿所    北京</h4>
                                    <span class="strip_line"></span>
                                    <p>Hi,Hi，各位猫娃狗娃的家长们好，我是托儿所所长晓晓，我已经养宠20多年了，因为晓晓现在全职开网店，所以...</p>
                                    <span class="strip_line"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="laptop">
                        <div class="pets-effect ver_line zoom">
                            <div class="img-box"><img class="img-responsive zoom-img" src="/images/pic11.jpg" alt=" " /></div>
                            <div class="pets-info">
                                <div class="pets-info-slid">
                                    <h4>妞妞和蘑菇麻    上海</h4>
                                    <span class="strip_line"></span>
                                    <p>Hi,Marina崇尚科学养宠，并拥有宠物职业护理师职称，宝贝在寄养期间很安全，家里各种宠物用品、修毛工具等...</p>
                                    <span class="strip_line"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="laptop">
                        <div class="pets-effect ver_line zoom">
                            <div class="img-box"><img class="img-responsive zoom-img" src="/images/pic12.jpg" alt=" " /></div>
                            <div class="pets-info">
                                <div class="pets-info-slid">
                                    <h4>毛小头温馨的家</h4>
                                    <span class="strip_line"></span>
                                    <p>
                                        三居室，客厅宽敞，玩具多，零食也多，每天遛狗三次，给狗狗做饭。
                                    </p>
                                    <span class="strip_line"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="laptop">
                        <div class="pets-effect ver_line zoom">
                            <div class="img-box"><img class="img-responsive zoom-img" src="/images/pic13.jpg" alt=" " /></div>
                            <div class="pets-info">
                                <div class="pets-info-slid">
                                    <h4>托尼宝贝</h4>
                                    <span class="strip_line"></span>
                                    <p>本人是爱狗狗的人，有多年养狗经验，能处理常见的狗狗健康问题，时间充足，可提供家庭寄养服务。</p>
                                    <span class="strip_line"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <script type="text/javascript">
                $(window).load(function() {
                    $("#flexiselDemo1").flexisel({
                        visibleItems: 3,
                        animationSpeed: 1000,
                        autoPlay: true,
                        autoPlaySpeed: 3000,
                        pauseOnHover: true,
                        enableResponsiveBreakpoints: true,
                        responsiveBreakpoints: {
                            portrait: {
                                changePoint:480,
                                visibleItems: 1
                            },
                            landscape: {
                                changePoint:640,
                                visibleItems: 2
                            },
                            tablet: {
                                changePoint:991,
                                visibleItems: 2
                            }
                        }
                    });

                });
            </script>
            <script type="text/javascript" src="/js/jquery.flexisel.js"></script>
        </div>
    </div>
</div>
<!-- //our pets -->
<!-- our works -->
<div class="treatments">
    <div class="container">
        <h3 class="title wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s" >申请 <span> 寄养家庭</span></h3>
        <div class="col-md-6 treat-left">

        </div>
        <div class="col-md-6 treat-right wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0s">
            <div class="treat-icon">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                <h4>基本信息</h4>
                <p>认真填写你的基本信息</p>
            </div>
        </div>
        <div class="col-md-6 treat-right2 text-right wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0.1s">
            <div class="treat-icon1">
                <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                <h4>设置</h4>
                <p>设定你期望的寄养价格、接受宠物种类和服务时间</p>
            </div>
        </div>
        <div class="col-md-6 treat-left2">


        </div>
        <div class="col-md-6 treat-left">

        </div>
        <div class="col-md-6 treat-right wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0.2s">
            <div class="treat-icon">
                <span class="glyphicon glyphicon-grain" aria-hidden="true"></span>
                <h4>实名认证</h4>
                <p>上传实名认证信息</p>
            </div>
        </div>
        <div class="col-md-6 treat-right2 text-right no-bor wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0.3s">
            <div class="treat-icon1">
                <span class="glyphicon glyphicon-scissors" aria-hidden="true"></span>
                <h4>提交预约</h4>
                <p>提交视频认证时间</p>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<%include footer.html%>

<!--回到顶部-->
<a id="back_top" href="#">
    <span><img src="/images/top.gif" alt=""></span>
</a>
<script>
    $(function(){
        $(window).scroll(function(){  //只要窗口滚动,就触发下面代码
            var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
            if( scrollt >200 ){  //判断滚动后高度超过200px,就显示
                $("#back_top").fadeIn(400); //淡出
            }else{
                $("#back_top").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
            }
        });
        $("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({scrollTop:"0px"},200);
        });
    });
</script>
</body>
</html>

